<template>
	<view class="baseView">
		<swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
			<swiper-item v-for="(item, index) in rollingList" :key="index">
				<view @click="toTopDetils(index)" class="swiperItem">
					<image class="slide-image" :src="item.url"></image>
					<view class="seeBtn mainBgColor">
						点击查看
					</view>
				</view>
		
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name:"zs-swiper",
		
		props:{
			rollingList:[]
		},
		data() {
			return {
				
			};
		},
		created() {
			console.log('created===');
			
		},
		methods:{
			toTopDetils(index){
				var model = this.rollingList[index];
				if(model.isJumpTo){
					wx.navigateToMiniProgram({
					  appId: model.appId,
					  success: function(res) {
					    console.log("跳转成功")
					  },
					  fail: function(err) {
					    console.log("跳转失败", err)
					  },
					  complete: function() {
					    console.log("跳转完成")
					  }
					})
				} else {
					uni.navigateTo({
						url: '../top-header-page/top-header-page?model=' + this.$encodeJson(model)
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.baseView {
		padding: 0px 15px;
		// border-radius: ;
	}

	.swiper {
		border-radius: 8px;
		overflow: hidden;
		width: 100%;
		height: 130px;
		/* 根据需要设置高度 */
	}

	.swiperItem {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.slide-image {
		width: 100%;
		height: 100%;
		border-radius: 8px;
		overflow: hidden;
	}

	.seeBtn {
		position: absolute;
		bottom: 30rpx;
		right: 20rpx;
		color: white;
		border-radius: 20rpx;
		// font-size: 24rpx;
		// border: 1px solid rgba(71, 120, 244, 1);
		padding: 6rpx 18rpx;
		box-shadow: 0rpx 0rpx 20rpx rgb(248, 205, 87);
	}
</style>